:root {
  font-family: 'Poppins', sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  font-variation-settings: normal;
  --font-family: 'Poppins', sans-serif;
  --font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  --text-color: #4b5563;
  --content-padding: 1.25rem;
  --inline-spacing: 0.5rem;
  --border-radius: 6px;
  --surface-ground: #f9fafb;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: #dfe7ef;
  --surface-hover: #f6f9fc;
  --focus-ring: 0 0 0 0.2rem #c7d2fe;
  --maskbg: rgba(0, 0, 0, 0.4);
  --highlight-bg: #eef2ff;
  --highlight-text-color: #4338ca;
  --transition-duration: 0.2s;
}

:root[class='dark'],
:root[class='dark nprogress-busy'] {
  --text-color: rgba(255, 255, 255, 0.87);
  --inline-spacing: 0.5rem;
  --surface-ground: #0d121d;
  --surface-section: #0d121d;
  --surface-card: #0f1522;
  --surface-overlay: #0f1522;
  --surface-border: rgba(255, 255, 255, 0.1);
  --surface-hover: rgba(255, 255, 255, 0.03);
  --focus-ring: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
  --highlight-bg: rgba(129, 140, 248, 0.16);
  --highlight-text-color: rgba(255, 255, 255, 0.87);
}

* {
  padding: 0;
  margin: 0;
  outline: none;
  box-sizing: border-box;
}

html {
  height: 100%;
  font-size: 14px;
}

body {
  height: 100%;
  overflow-y: auto;
  background-color: var(--surface-ground);
  color: var(--text-color);
}

#app {
  height: 100%;
}

a {
  text-decoration: none;
}

.t-a-c {
  text-align: center;
}

.m-auto {
  margin: 0 auto;
}

.m-5 {
  margin: 5px;
}
.m-10 {
  margin: 10px;
}
.m-20 {
  margin: 20px;
}
.m-30 {
  margin: 30px;
}
.m-40 {
  margin: 40px;
}

.m-l-5 {
  margin-left: 5px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-l-20 {
  margin-left: 20px !important;
}
.m-l-30 {
  margin-left: 30px !important;
}
.m-l-40 {
  margin-left: 40px !important;
}

.m-r-5 {
  margin-right: 5px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-r-20 {
  margin-right: 20px !important;
}
.m-r-30 {
  margin-right: 30px !important;
}
.m-r-40 {
  margin-right: 40px !important;
}

.m-lr-5 {
  margin: 0 5px !important;
}
.m-lr-10 {
  margin: 0 10px !important;
}
.m-lr-20 {
  margin: 0 20px !important;
}
.m-lr-30 {
  margin: 0 30px !important;
}
.m-lr-40 {
  margin: 0 40px !important;
}

.m-b-5 {
  margin-bottom: 5px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-b-20 {
  margin-bottom: 20px !important;
}
.m-b-30 {
  margin-bottom: 30px !important;
}
.m-b-40 {
  margin-bottom: 40px !important;
}

.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.m-t-40 {
  margin-top: 40px !important;
}

.p-5 {
  padding: 10px !important;
}
.p-10 {
  padding: 10px !important;
}
.p-20 {
  padding: 20px !important;
}
.p-40 {
  padding: 40px !important;
}
.p-lr-5 {
  padding: 0 5px !important;
}
.p-lr-10 {
  padding: 0 10px !important;
}
.p-lr-20 {
  padding: 0 20px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.p-l-20 {
  padding-left: 20px !important;
}
.p-r-20 {
  padding-right: 20px !important;
}

.jaguar-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.jaguar-search {
  text-align: left;
}

.jaguar-control {
  text-align: right;
  margin-bottom: 1rem;
}

.jaguar-table {
  .el-table__header-wrapper {
    overflow: unset;
  }

  .el-table__body-wrapper {
    overflow-y: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.multi-line-ellipsis {
  display: -webkit-box; /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 3; /*设置多少行*/
  -webkit-box-orient: vertical; /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
  overflow: hidden; /*文本会被修剪，并且剩余的部分不可见*/
  text-overflow: ellipsis; /*显示省略号来代表被修剪的文本*/
  text-wrap: pretty;
}

.draggable {
  cursor: move;
}

.text-button {
  cursor: pointer;
  color: var(--el-color-primary);
}

.w-b-b-w {
  word-break: break-word;
}
